<template>
  <div>
    <div class="w100 relative">
      <img src="../../static/img/iocn_b.png" class="w100 imgBg" alt="">
      <div class="w100 h100 zi-99 pl-28 rowsb rowsm pr-27" style="position: absolute;left: 0;top: 0;">
        <div class="rows rowsm">
          <img src="../../static/img/icon_ic.png" class="w-240" alt="">
          <div class="colfff txt">劳动教育数字管理平台</div>
          <div class="w-296 h-42 br-21 rows rowsm pl-18 pr-18" v-if="$route.path != '/loginIndex'">
            <!-- <img src="../../static/img/icon_oh.png" class="w-21" alt=""> -->
            <!-- <img src="../../static/img/icon_oh.png" class="w-21" alt=""> -->
              <!-- <el-input v-model="input2">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input> -->
          </div>
        </div>
        <div class="rows rowsm" v-if="isShowLogin">
        <router-link to="/login" target="_blank">
          <div class="item-warp rowsc rowsm">
            <img src="../../static/img/icon_xs.png" class="mr-12 imgIcon" alt="">
            <div class="itemTxt">学生登录</div>
          </div>
        </router-link>

          
          <div class="item-warp rowsc rowsm" style="cursor: pointer;" @click="toPath">
            <img src="../../static/img/icon_js.png" class="mr-12 imgIcon" alt="">
            <div class="itemTxt">教师登录</div>
          </div>
        </div>

        <div class="rows rowsm" v-else>
          <div class="w-130 h-42 bgff br-5 rowsc rowsm mr-20" @click="changeActive(12)">
            <!-- <img src="../../static/img/icon_xs.png" class="mr-12 w-30" alt=""> -->
            <div class="itemTxt" style="color: #E33636">帮助中心</div>
          </div>

          
          <div class="w-130 h-42 bgff br-5 rowsc rowsm">
            <!-- <img src="../../static/img/icon_js.png" class="mr-12 w-30" alt=""> -->
            
            <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <span class="itemTxt" style="color: #E33636">{{userName}}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  command="13">个人资料</el-dropdown-item>
              <el-dropdown-item  command="14">个人排行</el-dropdown-item>
              <el-dropdown-item  command="15">修改密码</el-dropdown-item>
              <el-dropdown-item  command="16">用户协议</el-dropdown-item>
              <el-dropdown-item  command="17">隐私政策</el-dropdown-item>
              <el-dropdown-item  command="18">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div class="w100 h-44 rows rowsm" style="background-color: #CA2932;" v-if="isShow2">
      <!-- <div class="rowsc rowsm colfff fs-30 h100" style="width: 100%;" @click="active = 0,$router.replace('/')" :style="active == 0 ? 'background-color: #A0060E;' : ''">首页</div>
      <div class="rowsc rowsm colfff fs-30 h100" style="width: 100%;" @click="active = 1,$router.replace('/survey?name=劳动教育概况')" :style="active == 1 ? 'background-color: #A0060E;' : ''">劳动教育概况</div>
      <div class="rowsc rowsm colfff fs-30 h100" style="width: 100%;" @click="active = 2,$router.replace('/survey?name=政策资讯')" :style="active == 2 ? 'background-color: #A0060E;' : ''">政策资讯</div>
      <div class="rowsc rowsm colfff fs-30 h100" style="width: 100%;" @click="active = 3,$router.replace('/survey?name=劳动教育动态')" :style="active == 3 ? 'background-color: #A0060E;' : ''">劳动教育动态</div>
      <div class="rowsc rowsm colfff fs-30 h100" style="width: 100%;" @click="active = 4,$router.replace('/')" :style="active == 4 ? 'background-color: #A0060E;' : ''">数据大屏</div>
      <div class="rowsc rowsm colfff fs-30 h100" style="width: 100%;" @click="active = 5,$router.replace('/survey?name=劳动教育实践基地')" :style="active == 5 ? 'background-color: #A0060E;' : ''">劳动教育实践基地</div> -->






    <router-link to="/" style="width: 16.6%;" class="h100" :style="active == 0 ? 'background-color: #A0060E;' : ''"> 
      <!-- @click.native="changeActive(0)" -->
      <div class="rowsc rowsm colfff fs-14 h100" style="width: 100%;">首页</div>
    </router-link>
    <router-link to="/survey?name=劳动教育概况" style="width: 16.6%;" class="h100" :style="active == 1 ? 'background-color: #A0060E;' : ''">
      <div class="rowsc rowsm colfff fs-14 h100" style="width: 100%;">劳动教育概况</div>
    </router-link>
    <router-link to="/survey?name=政策资讯" style="width: 16.6%;" class="h100" :style="active == 2 ? 'background-color: #A0060E;' : ''">
      <div class="rowsc rowsm colfff fs-14 h100" style="width: 100%;">政策资讯</div>
    </router-link>
    <router-link to="/survey?name=劳动教育动态" style="width: 16.6%;" class="h100" :style="active == 3 ? 'background-color: #A0060E;' : ''">
      <div class="rowsc rowsm colfff fs-14 h100" style="width: 100%;">劳动教育动态</div>
    </router-link>
    <div style="width: 16.6%;" class="h100">
    <a href="http://211.64.247.145:8083/" target="_blank">
      <div class="rowsc rowsm colfff fs-14 h100" style="width: 100%;">数据大屏</div>

    </a>


    </div>
    <!-- <router-link to="/" style="width: 16.6%;" class="h100" :style="active == 4 ? 'background-color: #A0060E;' : ''">
      
    </router-link> -->
    <router-link to="/survey?name=劳动教育实践基地" style="width: 16.6%;" class="h100" :style="active == 5 ? 'background-color: #A0060E;' : ''">
      <div class="rowsc rowsm colfff fs-14 h100" style="width: 100%;">劳动教育实践基地</div>
    </router-link>
    </div>
<!--    <el-carousel :activeIndex="activeIndex" @change="handleCarouselChange" arrow="always" height="450px" v-if="!this.token">-->
<!--      <el-carousel-item v-for="(item, index) in carouselItems" :key="index" :style="{ minHeight: item.height + 'px' }">-->
<!--        <img :src="item.configurationContent" alt="轮播图" width="100%" height="auto">-->
<!--      </el-carousel-item>-->
<!--    </el-carousel>-->

<!--    <el-carousel height="288px" v-if="isShow">-->
<!--      <el-carousel-item v-for="item in 2" :key="item">-->
<!--        <img src="http://ldjy.zxcvii.top/file/zb3.png" class="w100 h100" alt="">-->
<!--      </el-carousel-item>-->
<!--    </el-carousel>-->
  </div>
</template>

<script>
import axios from 'axios';
export default {
  components: {},
  props: {
    active:{
      type:Number
    },
    isShow:{
      type:Boolean,
      default:true
    },
    isShow2:{
      type:Boolean,
      default:true
    },
    isShowLogin:{
      type:Boolean,
      default:true
    },
    userName:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      activeIndex: 0, // 当前显示的轮播项索引
      carouselItems: [ // 轮播图数据
        // 更多轮播图数据...
      ],
      // active:0
      input2:'',
      token:''

    };
  },
  watch: {},
  computed: {},
  methods: {
    getSlideshow() {
      const Axios = axios.create({
        // baseURL: 'http://localhost:8078/'
        baseURL: this.$apiBaseUrl
      });
      Axios.get('/project/proconfigimage/listImage')
          .then(response => {
            this.carouselItems = response.data.rows;
          })
          .catch(error => {
            console.error('请求失败:', error);
          });
    },

    handleCarouselChange(index) {
      this.activeIndex = index; // 更新当前显示的轮播项索引
    },

    // changeActive(i){
    //   this.active = i
    //   this.$forceUpdate()
    // },
    changeActive(i){
      this.$emit('changeActive',i)
    },
    handleCommand(e){
      console.log(e)
      if(e == '18'){
        this.$router.replace('/login')
        sessionStorage.clear()
      }else{
        this.changeActive(e)
      }
      // alert(e)
      
    },
    toPath(){
      // 
      window.open('https://ldjy.lyu.edu.cn:8082/')
    },
  },
  created() {
    this.getSlideshow()
  },
  mounted() {
    //  this.token = localStorage.getItem('token')
     this.token = sessionStorage.getItem("token")
  }
};
</script>
<style lang="scss" scoped>
.imgBg{
  height: 100px !important;
}
.txt{
  font-size: 22px;
  margin: 0 15px 0 15px;
}
/deep/.el-input__inner {
  background: rgba(0,0,0,0);
    border-radius: 27px;
    border: 2px solid #fff;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    outline: 0;
    padding-left: 30px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  /deep/ .el-input__icon {
    font-size: 18px;
    height: 100%;
    color: #fff;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 30px;
    cursor: pointer;
}
.item-warp{
  width: 130px;
  height: 36px;
  background: #fff;
  
  border-radius: 5px;
  line-height: 36px;
  margin-right: 20px;
  .itemTxt{
    font-size: 14px;
    color: #E33636 !important;
    cursor: pointer;
  }
  .imgIcon{
    width: 20px !important;
    height: 20px !important;
  }

}
.h-44{
  height: 44px;
}
.pointer{
  cursor: pointer;
}

.el-carousel__item {
  // min-height: 500px; /* 可以根据需要调整 */
  // overflow: hidden; /* 隐藏超出部分 */
}

</style>